import { Button } from "antd"
import Driver from "driver.js"
import 'driver.js/dist/driver.min.css'
import { useState } from "react";

const steps = [
	{
		element: "#antd-button",
		popover: {
			title: "开始导航",
			description: "你刚刚点的就是我啦",
			position: "bottom"
		}
	},
	{
		element: "#isCollapse",
		popover: {
			title: "展开/收起菜单",
			description: "你点一下菜单就会展开和收起",
			position: "bottom"
		}
	},
	{
		element: ".ant-breadcrumb",
		popover: {
			title: "面包屑导航",
			description: "怕你找不到路特意加的咯",
			position: "right"
		}
	},
	{
		element: ".icon-contentright",
		popover: {
			title: "更改组件大小",
			description: "只对antd组件有用",
			position: "left"
		}
	},
	{
		element: ".icon-zhongyingwen",
		popover: {
			title: "语言",
			description: "目前支持中英文",
			position: "left"
		}
	},
    {
		element: ".icon-fangda",
		popover: {
			title: "全屏",
			description: "全屏就是全屏",
			position: "left"
		}
	},
	{
		element: ".icon-zhuti",
		popover: {
			title: "更改皮肤",
			description: "两套皮肤很有意思的",
			position: "left"
		}
	}
];

const Step = () => {
    const driver = new Driver({
        animate: true, // 在更改突出显示的元素时是否设置动画，
		opacity: 0.75, // 背景不透明度（0表示只有弹出窗口，没有覆盖）
		doneBtnText: "结束", // 最后一个按钮上的文本
		closeBtnText: "关闭", // 此步骤的“关闭”按钮上的文本
		nextBtnText: "下一步", // 此步骤的下一步按钮文本
		prevBtnText: "上一步" // 此步骤的上一个按钮文本
    })

    const guide = () => {
        driver.defineSteps(steps)
        driver.start()
    }

    return (
        <div>
            <h2>引导页</h2>
            <Button onClick={guide} type="primary" id="antd-button">点击开始引导</Button>
        </div>
    )
}

export default Step